<template>
    <div>
        <el-row :gutter="30">
            <el-col :span="12">
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-card class="small_grid_card">
                            <h3>某某数据</h3>
                            <p><span>8,888</span>元</p>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="small_grid_card">
                            <h3>某某数据</h3>
                            <p><span>8,888</span>元</p>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="small_grid_card">
                            <h3>某某数据</h3>
                            <p><span>8,888</span>元</p>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="30" style="margin-top: 20px;">
                    <el-col :span="8">
                        <el-card class="small_grid_card">
                            <h3>某某数据</h3>
                            <p><span>8,888</span>元</p>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="small_grid_card">
                            <h3>某某数据</h3>
                            <p><span>8,888</span>元</p>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="small_grid_card">
                            <h3>某某数据</h3>
                            <p><span>8,888</span>元</p>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="12">
                <el-card class="big_card">
                    <Tubiao1 />
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top: 20px;">
            <el-col :span="16">
                <el-card class="big_card" style="height: 460px;">
                    <Tubiao3 />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="big_card" style="height: 460px;">
                    <Tubiao2 />
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top: 20px;">
            <el-col :span="24 / 3 * 2">
                <el-card class="big_card">

                </el-card>
            </el-col>
            <el-col :span="24 / 3 * 1">
                <el-card class="big_card">

                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {jiekou} from '@/api/index';
    import Tubiao1 from './Tubiao1.vue';
    import Tubiao2 from './Tubiao2.vue';
    import Tubiao3 from './Tubiao3.vue';

    export default {
        created() {
            jiekou();
        },
        components: {
            Tubiao1,
            Tubiao2,
            Tubiao3,
        }
    }
</script>

<style lang="less" scoped>

.small_grid_card {
    height: 120px;

    h3 {
        margin: 0;
        padding: 0;
        color: rgb(253, 190, 102);
    }
    p {
        margin: 0;
        padding: 0;
        margin-top: 10px;
        color: rgb(248, 112, 112);
        font-size: 30px;
    }
}

.big_card {
    height: 260px;
}
 
</style>